<!--
  - Copyright (c) 2018-2019.
  -  This file is part of the moonpie production
  -  (c) johnzhang <875010341@qq.com>
  -  This source file is subject to the MIT license that is bundled
  -  with this source code in the file LICENSE.
  -->

<template>
    <base-form v-bind:collect-form-data="onSaveFormData" v-bind:use-frame="initConfig.useFrame">
        <!-- 展示数据部分 -->
        <template v-slot:main>
            <div class="am-form-group">
                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">机读码</label>
                <div class="am-u-sm-9 am-u-end">
                    <input type="text" class="tpl-form-input" v-model="config.code" required/>
                </div>
            </div>

            <div class="goods-spec-single">
                <div class="am-form-group">
                    <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">发送器标题</label>
                    <div class="am-u-sm-9 am-u-end">
                        <input type="text" class="tpl-form-input" v-model="config.title"/>
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">发送器描述</label>
                    <div class="am-u-sm-9 am-u-end">
                        <input type="text" class="tpl-form-input" v-model="config.description"/>
                    </div>
                </div>
                <div class="am-form-group">
                    <label class="am-u-sm-3 am-u-lg-2 am-form-label">模板解析器服务ID</label>
                    <div class="am-u-sm-9 am-u-end">
                        <input type="text" class="tpl-form-input" v-model="config.template_parser"/>
                    </div>
                </div>
                <template-chooser-config ref="template" v-bind:elements="initConfig.templates" v-bind:current-template-data="initConfig.data.template_data"/>
                <!-- 这里选择模板数据 -->
                <div class="am-form-group">
                    <label class="am-form-label am-u-lg-2 am-u-sm-3 form-require">状态</label>
                    <div class="am-u-lg-10 am-u-sm-9 am-u-end">
                        <label class="am-radio-inline">
                            <input type="radio" data-am-ucheck v-model="config.status" value="1"/>启用
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" data-am-ucheck v-model="config.status" value="0"/>禁用
                        </label>
                    </div>
                </div>
            </div>
        </template>
    </base-form>
</template>

<script>
  import BaseForm              from "@/backend/components/basic/BaseForm";
  import TemplateChooserConfig from "./TemplateChooserConfig";

  export default {
    props: ['initConfig'],
    name: "TemplateSenderConfig",
    data() {
      return {
        config: this.initConfig.data
      }
    },
    methods: {
      onSaveFormData() {
        //现在搜集模板设置相关数据
        const $template = this.$refs.template
        let data = _.merge({}, this.config, {template_id: $template.$data.currentTemplate.id})
        data.template_data = $template.$refs.tmplContent.$data.template
        console.log('current config', data)
        return {submit_data: data}
      }
    },
    components: {TemplateChooserConfig, BaseForm}
  }
</script>

<style scoped>

</style>